<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="素材版本" :visible.sync="dialogVisible" @close="resetForm()" width="400px">
        <span class="font_14 color_01">当前素材</span>
        <div class="current_info">
            <div class="cur_title">{{curInfo.material_name}}</div>
            <div class="cur_tag">{{curInfo.tag.length>0?curInfo.tag.map((item=>{return item.name})).join('/'):'暂无标签'}}</div>
            <div class="cur_id">ID：{{curInfo.material_id==0?'无':curInfo.material_id}}</div>
            <div class="cur_id">{{curInfo.create_time}}</div>
            <div class="cur_line"></div>
            <div class="flexbox flexcenter flexbetween">
                <div class="font_13 color_02">素材类型</div>
                <span class="cur_type">{{curInfo.version_type=='parent'?"父级版本":"子级版本"}}</span>
            </div>
        </div>
        <span class="font_14 color_01">版本素材</span>
        <div class="record_box">
            <div class="record_item flexbox flexcenter" v-for="(item,index) in recordList" :key="index">
                <el-checkbox v-model="item.checked" @change="checkRecord"></el-checkbox>
                <div class="record_info flex">
                    <div class="record_list flexbox flexbetween">
                        <span class="record_title">版本类型</span>
                        <span class="record_text">{{item.version_type=='parent'?"父级版本":"子级版本"}}</span>
                    </div>
                    <div class="record_list flexbox flexbetween">
                        <span class="record_title">素材ID</span>
                        <span class="record_text">{{item.material_id}}</span>
                    </div>
                    <div class="record_list flexbox flexbetween">
                        <span class="record_title">上传时间</span>
                        <span class="record_text">{{item.create_time}}</span>
                    </div>
                    <div class="record_list flexbox flexbetween">
                        <span class="record_title">素材名称</span>
                        <span class="record_text">{{item.material_name}}</span>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm()" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="submitForm()" class="el-button-width" size="small" :disabled='disabled' :loading="disabled">跳转素材</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            disabled: false,
            dialogVisible: false,
            curInfo:{},
            recordList: [],
            hasCheck: [],
            id: "",
        };
    },

    created() {},
    beforeDestroy() {},
    methods: {
        //获取记录列表
        async getRecordList(id) {
            const { data: res } = await this.$http.post(
                "adminapi/Materialv2/materialVersion",
                {
                    material_id: id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data) {
                    res.data[i].checked = false;
                }
                this.recordList = res.data;
            }
        },

        checkRecord() {
            let arr = [];
            for (let i in this.recordList) {
                if (this.recordList[i].checked) {
                    arr.push(this.recordList[i].id);
                }
            }
            this.hasCheck = arr;
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },

        submitForm() {
            if (this.hasCheck.length == 0) {
                this.$message.error("请选择记录！");
                return;
            } else {
                this.$emit('getVersion',this.hasCheck)
                this.dialogVisible = false;
            }
        },
    },
};
</script>
<style scoped>
.record_box{
    max-height: 400px;
    overflow-y: auto;
}
.record_item {
    background-color: #f8f9fb;
    border-radius: 2px;
    padding: 8px 12px;
    margin-top: 12px;
}
.record_title {
    font-size: 14px;
    color: #616c85;
    line-height: 22px;
    width: 80px;
    flex-shrink: 0;
}
.record_text {
    font-size: 14px;
    color: #17233d;
    line-height: 22px;
}
.record_info {
    margin-left: 15px;
}
.record_list {
    padding: 4px 0;
}
.current_info{
    border: 1px solid #F1F2F3;
    border-radius: 2px;
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.cur_title{
    font-size: 14px;
    color: #17233D;
    line-height: 20px;
}
.cur_tag{
    font-size:14px;
    color: #616C85;
    margin-top: 4px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cur_id{
    font-size:14px;
    color: #B4B7BD;
    margin-top: 4px;
    height: 20px;
    line-height: 20px;
}
.cur_line{
    border-bottom: 1px solid #F1F2F3;
    margin-top: 12px;
    margin-bottom: 12px;
}
.cur_type{
    font-size: 13px;
    color: #4475FF;
    border: 1px solid #4475FF;
    border-radius: 2px;
    line-height: 20px;
    padding: 0 8px;
}
</style>

